<template>
    <div :id="id" :style="style"></div>
</template>
<script >
export default {
  name: "Chart",
  data() {
    return {
      //echarts实例
      chart: ""
    };
  },
  props: {
    //父组件需要传递的参数：id，width，height，option
    id: {
      type: String
    },
    width: {
      type: String,
      default: "100%"
    },
    height: {
      type: String,
      default: "300px"
    },
    echartOption: {
      type: Object
    }
  },

  computed: {
    style() {
      return {
        height: this.height,
        width: this.width
      };
    }
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    // 图表
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById(this.id));
      // 绘制图表
      window.addEventListener("resize", this.myChart.resize);
      this.myChart.setOption(this.echartOption, true);
    }
  }
};
</script>